<template>
  <view class="edit">
    <view class="title">
      <text>编辑照片</text>
    </view>
    <view class="Carmen">
      <image :src="filePath" class="image" model="aspectFit"/>
    </view>
    <view class="colors">
      <text>更换底色</text>
    </view>
    <view class="parms">
      <view :class="colorIndex === index? 'index-item':'item'"
            v-for="(item,index) in colors"
            @click="checkoutColor(item)"
            :key="index">
        <text>{{ item.name }}</text>
      </view>
    </view>
    <view class="propetis">
      <view class="p">
        <text>自动裁剪人像</text>
        <switch type="switch"/>
      </view>
      <view class="p">
        <text>美颜优化</text>
        <switch type="switch"/>
      </view>
    </view>
    <view class="btns">
      <view class="save" @click="photoMake">制作照片</view>
      <view class="ref">重新拍摄</view>
    </view>
  </view>
</template>

<script setup>
import {BASE_URL} from '@/api/request'
import {ref, onMounted} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

const filePath = ref('')
const colors = ref([
  {
    name: '白底',
    color: '#FFFFFF',
    index: 0
  },
  {
    name: '蓝底',
    color: '#0000FF',
    index: 1
  },
  {
    name: '红底',
    color: '#FF0000',
    index: 2
  }
])
const colorIndex = ref(0)

onLoad(async (option) => {
  filePath.value = option.data
  console.log('接收到的文件临时地址', filePath.value)
})

const checkoutColor = (item) => {
  colorIndex.value = item.index
}

const photoMake = async () => {
  uni.showToast({
    title: '选择尺寸',
    icon: 'loading',
    duration: 500,
    success: () => {
      uni.navigateTo({
        url: '/pages/position/size?data=' + filePath.value + '&color=' + (colors.value.find(i => i.index === colorIndex.value)?.color) || '#FFFFFF'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.edit {
  //border: 1px solid red;
  width: 100%;
  height: calc(100vh);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 35rpx;
  background: rgba(29, 40, 58);
  overflow: hidden;

  .title {
    //border: 1px solid red;
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: white;
    font-size: 35rpx;
  }

  .Carmen {
    //border: 1px solid red;
    width: 700rpx;
    height: 750rpx;
    margin-top: 25rpx;
    overflow: visible;
    object-fit: contain;
    object-position: center;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.10);

    .image {
      width: 100%;
      height: 100%;
    }
  }

  .colors {
    //border: 1px solid red;
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35rpx;
    color: rgb(93, 108, 136);
  }

  .parms {
    //border: 1px solid red;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: rgb(50, 75, 119);
    border-radius: 55rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding: 12rpx;
    margin-top: 15rpx;

    .item, .index-item {
      transition: all 0.2s ease-in;
      //border: 1px solid red;
      width: 33%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5rpx;
      color: rgb(93, 108, 136);
      border-radius: inherit;
    }

    .index-item {
      background: rgb(39, 54, 92);
      color: white;
    }
  }

  .propetis {
    //border: 1px solid red;
    width: 100%;
    height: 250rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15rpx;
    border-radius: 45rpx;
    margin-top: 40rpx;
    overflow: hidden;
    color: white;
    background: rgb(50, 75, 119);

    .p {
      //border: 1px solid red;
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10rpx 0;

      text {
        width: 50%;
      }
    }
  }

  .btns {
    width: 100%;
    //border: 1px solid red;
    height: 240rpx;
    //padding: 5rpx 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 25rpx;

    .save, .ref {
      //border: 1px solid red;
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10rpx 0;
      border-radius: 45rpx;
      color: white;
      background: rgb(43, 124, 238);
    }

    .ref {
      background: rgb(50, 75, 119);
    }

  }
}
</style>